-<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性 vertical-align
		 功能：1.适用于表格【栅格布局】
		      2.行内元素与行内块元素对齐方式
			    理解：文本和图片对齐方式【垂直居中】
			    元素种类：
				行内元素：典型的行内元素 span、a、文本
				特点：在一行内显示、不可设置宽高
				块级元素：典型块级元素div、p
				特点：独占一行、可设宽高
				行内块元素：典型行内块元素 img
				特点：在一行内显示，可设宽高
				页面组成：元素之间嵌套生成
				三种元素相互嵌套  √  嵌套根据元素特点页面混乱
				嵌套条件1：在一行内显示【效果】
				          块套行  √    推荐
						  行套行  √
						  行套块  √  增加条件，块添加宽高，造成页面布局混乱 ×
						  块套块  √
			    嵌套条件2：独占一行【效果】
				          块套行  √   推荐
				          行套行  ×
				          行套块  ×    混乱
				          块套块  √
		 -->
		<style>
			 /* 抓每个img 
			派生(后代)选择器
			抓取父元素中所有(后代)子元素(元素嵌套特点)
			伪类选择器:
			特点:在选择器后,过滤符合特定条件的某个元素
			 nth-child 选中父元素中第n个
			 符合条件：p中包含4个img
			 id抓取父元素：空间大
			 class抓取父元素中某个子元素：微调
			 */ 
				
			p img.baseline{
				vertical-align: baseline;
			}
			p img.top{
				vertical-align: top;
			}
			p img.middle{
				vertical-align: middle;
			}
			p img.bottom{
				vertical-align: bottom;
			}
			/* vertical-align和text-align的区别？
			 区别：1：属性值不同
			      2.vertical-align操作文本和图片垂直
				    text-align操作文本左右和居中以及两边对齐
			 */
			
		</style>
	</head>
	<body>
		<h1>垂直方向属性使用【针对元素种类】</h1>
		<p>太乙1<img class="baseline" src="img/太1.png" alt="太乙1" width="100px" height="100px"/>基线对齐</p>
		<!-- 顶部对齐、垂直对齐、底部对齐 -->
		<p>哪吒1<img class="top" src="img/扎1.png" alt="哪吒1" width="100px" height="100px"/>顶部对齐</p>
		<p>哪吒2<img class="middle" src="img/扎2.png" alt="哪吒1" width="100px" height="100px"/>垂直对齐</p>
		<p>哪吒3<img class="bottom" src="img/扎3.png" alt="哪吒1" width="100px" height="100px"/>底部对齐</p>
	    <!-- 需求：垂直方向属性： 4个属性值
		          如果不改变现有html结构，可以找到依次4个img
				  抓每个--4个图片
		     思路：派生选择器+伪类选择器
		 -->
	</body>
</html>